<template>
  <div class="approval">
    <div class="container">
      <h3>待审批</h3>
      <div class="content">
        <div class="nav">
          <ul class="left">
            <li :class="['hoverShow',{clickShow:valueType==0}]" @click="changeData(0)">待审批</li>
            <li :class="['hoverShow',{clickShow:valueType==1}]" @click="changeData(1)">已审批</li>
            <li :class="['hoverShow',{clickShow:valueType==2}]" @click="changeData(2)">我发起的</li>
            <a-badge :count="copyTotal" :offset=[-15,-2] :numberStyle="userControlStyle">
              <li :class="['hoverShow',{clickShow:valueType==3}]" @click="changeData(3)">抄送</li>
            </a-badge>
          </ul>
          <a-input-search style="width:25%" title="可按提交人、项目编号、提交时间模糊搜索" placeholder="可按提交人、项目编号、提交时间模糊搜索" v-model="valueSearch" @search="doSearch()"/>
        </div>
        <div class="nav" v-if="valueType == 3">
          <ul class="left">
            <li :class="['hoverShow',{clickShow:notifyValueType==0}]" @click="changeData(3,0)">抄送未读</li>
            <li :class="['hoverShow',{clickShow:notifyValueType==1}]" @click="changeData(3,1)">抄送已读</li>
            <li :class="['hoverShow',{clickShow:notifyValueType==2}]" @click="changeData(3,2)">已确认</li>
          </ul>
        </div>
        <a-table
          class="approval-content"
          :columns="approvalColumns"
          :data-source="approvalData"
          :pagination="pagination"
          @change="pageChange"
          :loading="tabLoading"
          size='small'
          rowKey='id'
        >
        <template slot="toAudit" slot-scope="text, record">
          <a-button type="primary" size="small" @click="doAudit(record)">{{ valueType == 0 ? '审批': '明细'}}</a-button>    
        </template>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import '@/config/upload.install.js'
import {getAction,getActionAsync,postAction} from '@/api/manage'
import { ACCESS_TOKEN } from "@/store/mutation-types"
export default {
  components:{
    'HomeNav': () => import('@/components/layouts/HomeNav'),
  },
  data () {
    return {
      userinfo:{
          info:this.$store.getters.userInfo,
          module:'awaitingapproval',
          badgecount:''
      },
      valueType:0, //数据类型：0-待审批，1-已处理，2-我发起的
      notifyValueType:0, //抄送
      valueSearch:'',
      tabLoading:false,
      pagination:{
        total:0,
        current:1
      },
      currPageIndex:1,
      currPageSize:10,
      url:{
        loadData:'/home/pendingApprovalList',
      },
      approvalColumns:[
        {
          title: '类型',
          dataIndex: 'auditType',
          width: '15%',
          align:'left'
        },
        {
          title: '名称',
          dataIndex: 'projectName',
          width:'30%',
          align:'left'
        },
        {
          title: '编号',
          dataIndex: 'projectNo',
          width:'15%',
          align:'center'
        },
        {
          title: '提交人',
          dataIndex: 'submitUserName',
          width:'15%',
          align:'center'
        },
        {
          title: '提交时间',
          dataIndex: 'submitDate',
          width:'15%',
          align:'center'
        },
        { title: '操作', 
          dataIndex: 'url',  
          width:'10%',
          scopedSlots: { customRender: 'toAudit' } 
        },
      ],
      approvalData:[],
      userControlStyle:{
          backgroundColor:'#ff745d',
          height:'15px',
          lineHeight:'15px'
      },
      copyTotal:'',
    }
  },
  mounted(){
    this.loadData();
    this.loadCopyNum()
  },
  methods: {
    doAudit(record){
      if(record.sys=='hite-vue'){
        if(["质量通知单审批","合同验收付款审批","基建管理单据审批"].indexOf(record.auditType)>-1){
          this.$router.push(record.url)
        }else{
          let urlJump = this.$router.resolve({path: record.url });
          window.open(urlJump.href,"_blank")
        }
        
      }else{
        var url = this.HTE_OLD_SERVER_URL+record.url+'&bootToken='+Vue.ls.get(ACCESS_TOKEN);
        window.open(url);
      }
    },
    doSearch(){
      this.currPageIndex=0;
      this.currPageSize=10;
      this.loadData();
    },
    loadData(){
      var vm=this;
      this.tabLoading=true;
      getAction(vm.url.loadData,{status:vm.valueType,notifyStatus:vm.notifyValueType,keyWord:vm.valueSearch,pageIndex:vm.currPageIndex,pageSize:vm.currPageSize}).then(res=>{
        this.tabLoading=false;
          if(res.code==200){
            vm.approvalData = res.result.records;
            vm.pagination.total = res.result.total;
          }else{
            vm.$messageWorkReport.warning('加载数据异常');
            console.log(res.message)
          }
        }).catch(e=>{
          this.tabLoading=false;
          vm.$messageWorkReport.warning('加载数据失败');
          console.log(e.message)
        });
    },
    loadCopyNum() {
       // 抄送
      getAction(this.url.loadData,{status:3,notifyStatus:0,keyWord:''}).then(res=>{
          if(res && res.result){
             this.copyTotal = res.result.total
          }                
      })
    },
    changeData(type,notifyValue){
      this.valueType=type;
      this.currPageIndex=1;
      this.currPageSize=10;
      this.pagination.current=1
      if (!notifyValue) {
        notifyValue = 0
      }
      if (type == 3) {
        this.notifyValueType = notifyValue
      } else {
        this.notifyValueType = 0
      }
      this.loadData();
    },
    pageChange(page){
      this.currPageIndex=page.current;
      this.currPageSize=page.pageSize;
      this.pagination.current=page.current
      this.loadData();
    }
  },
};
</script>
<style lang="less" scoped>
.approval{
  background-color: #f5f5f5;
  height: 100%;
  .container{
    padding:30px 125px ;
    background-color: #f5f5f5;
    h3{
      font-size: 18px;
      font-weight: 600;
    }
    .content{
      background-color: #fff;
      padding: 20px;
      .nav{
        border-bottom: 1px solid #f6f7f8;
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        .left{
          list-style: none;
          display: flex;
          padding: 0;
          margin: 0;
          align-items: center;
          font-size: 15px;
          font-weight: 600;
          li{
            padding: 10px;
            &.hoverShow{
              cursor: pointer;
              border-bottom: 3px solid rgba(255,255,255,0);
              width: 85px;
              text-align: center;
              &:hover{
                border-bottom: 3px solid #0988dc;
              }
            }
            &.clickShow{
              color: #0988dc;
              border-bottom: 3px solid #0988dc;
            }
          }
        }
      }
      .approval-content{
        margin-top: 20px;
        /deep/ .ant-table-small{
          border: unset;
          border-radius: unset;
        }
        /deep/ .ant-table-thead > tr > th{
          border: unset;
          border-radius: unset;
        }
        /deep/ .ant-table-thead{
          background-color:#f6f7f9 ;
        }
        /deep/ .ant-table-small > .ant-table-content > .ant-table-body{
          margin: 0;
        }
      }
    }
  }
}
</style>
